<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影详情</title>
    <link rel="stylesheet" href="../../static/assets/css/style_detail.css">
</head>
<body>
    <div class="container">
        <div class="movie-info">
            <h2>电影标题</h2>
            <img class="movie-poster" src="{{ movie_details[2] }}" alt="电影海报">
        </div>

        <div class="movie-details">
            <h3>电影信息</h3>
            <p>排名：{{ ranking }}</p>
            <p style="font-size: 37px;letter-spacing: 0.163em;line-height: 0.7;padding-left: 30px;color: #1c5c93">{{ movie_details[3] }}</p>
            <p>主演信息：{{ movie_details[4] }}</p>
            <p>评分：{{ movie_details[5] }}</p>
            <p>评价人数：{{ movie_details[6] }} 人评论</p>
            <p>简介：{{ movie_details[7] }}</p>
            <p style="color: #00CA4C;font-size: 10px">【{{ movie_details[8] }}】</p>
        </div>

        <div class="comment-section">
            <h3 style="font-size: 29px;line-height: 1.1;letter-spacing: 0.478em;font-weight: 800;font-style: normal;">评论区：</h3>
            <!-- Comments -->
            <div id="comments">
                {% if comments %}
                    {% for comment in comments[:10] %}
                        <div id="{{ comment[0] }}" class="comment">
                            <div class="user-info">
                                <img src="../{{ comment[5] }}" style="width: 50px;height: 50px;border-radius: 50%;">
                                {% if comment[3] == currentUser %}
                                    <p class="username">{{ comment[3] }}</p>
                                {% else %}
                                    <p class="username"><a href="/user/{{ currentUser }}/{{ comment[3] }}" style="font-size: 18px;font-weight: 600;">{{ comment[3] }}</a></p>
                                    <button class="reply-btn" data-user="{{ comment[3] }}" user_comment_id="{{ comment[0] }}" style="font-size: 15px;line-height: 0.2;letter-spacing: 0.103em;font-weight: 400;font-style: italic;margin-left: 600px;">回复</button>
                                {% endif %}
                            </div>
                            <p class="content" style="padding-top: 7px;padding-bottom: 7px;">{{ comment[2] }}</p>
                            <p class="time" style="padding-right: 100px;">时间: {{ comment[4]}}</p>
                            <button style="display: none;font-size: 21px;line-height: 0.3;letter-spacing: 0.044em;" class="expand-btn" commentId="{{ comment[0] }}">More</button>
                        </div>
                    {% endfor %}
                {% else %}
                    <p>暂时没人评论.快来占第一把沙发吧</p>
                {% endif %}
            </div>

            <!-- 弹出的评论输入框 -->
            <div id="commentModal" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <form id="replyForm" method="post">
                        <textarea id="replyContent" name="content" maxlength="100" placeholder="请输入您的回复评论"></textarea>
                        <input id="submitReplyBtn" type="submit" value="提交回复">
                    </form>
                </div>
            </div>

            <div id="lode-more">
                {% if comments|length > 10 %}
                    <button id="loadMoreBtn"><span class="load-more-arrow"></span>加载更多</button>
                {% endif %}
            </div><br>

            <!-- 添加评论表单 -->
            <form id="commentForm" action="/submit_comment/{{ currentUser }}" method="post" onsubmit="return validateComment()">
                <!-- 隐藏字段，传递电影标题 -->
                <input type="hidden" id="movieId" name="movieId" value="{{ movie_details[0] }}">
                <textarea id="comment" name="comment" rows="4" cols="50" maxlength="100" oninput="updateCharacterCount()"></textarea><br>
                <div id="characterCount">Characters: 0/100</div><br>
                <input type="submit" value="提交评论">
            </form>
        </div>
    </div>

    <script>

        document.addEventListener('DOMContentLoaded', function() {
            // 页面加载完成后调用一次 listenLodeMore() 函数
            listenLodeMore();

            // 绑定加载更多按钮点击事件
            loadMoreBtn.addEventListener('click', loadMoreComments);
        });
        var commentOffset = 10; // 初始评论偏移量
          var comments = {{ comments|tojson|safe }}; // 所有评论数据
          var commentsDiv = document.getElementById('comments'); // 评论区容器
          var loadMoreBtn = document.getElementById('loadMoreBtn'); // 加载更多按钮
          var currentUser = "{{ currentUser }}"; // 在 HTML 模板中声明当前用户的 JavaScript 变量
          // 加载更多评论
          function loadMoreComments() {
          for (var i = commentOffset; i < commentOffset + 10 && i < comments.length; i++) {
            var comment = comments[i];
            var commentElement = document.createElement('div');
            commentElement.setAttribute('id', comment[0]); // 设置元素的id属性为comment[0]的值
            commentElement.classList.add('comment');

            var usernameHtml = "";
            if (comment[3] === currentUser) {
              usernameHtml = `<p class="username">${comment[3]}</p>`; // 当评论者和当前登录者相同时，只显示文本
            } else {
              usernameHtml = `<p class="username"><a href="/user/${ comment[3] }" style="font-size: 18px;font-weight: 600;">${ comment[3] }</a></p>
                              <button class="reply-btn" data-user="${ comment[3] }" user_comment_id = "${ comment[0] }"style=" font-size: 15px;line-height: 0.2;letter-spacing: 0.103em;font-weight: 400;font-style: italic;margin-left: 600px;">回复</button>`; // 当评论者和当前登录者不同时，生成带有链接的用户名
            }

            // 构建评论元素的HTML内容
            commentElement.innerHTML = `
                <div class="user-info">
                    <img src="../${comment[5]}" style="width: 50px; height: 50px; border-radius: 50%;">
                    ${usernameHtml}
                </div>
                <p class="content" style="padding-top: 7px; padding-bottom: 7px;">${comment[2]}</p>
                <p class="time" style="padding-right: 100px;">时间: ${formatDate(comment[4])}</p>
                <button style="display: none; font-size: 21px; line-height: 0.3; letter-spacing: 0.044em;" class="expand-btn" commentId="${comment[0]}">More</button>`;
            commentsDiv.appendChild(commentElement);
          }
          commentOffset += 10; // 更新评论偏移量
          if (commentOffset >= comments.length) {
            loadMoreBtn.style.display = 'none'; // 隐藏加载更多按钮
          }
            // 添加点击事件监听器到新添加的回复按钮
          addReplyButtonClickListener();
            // 添加点击事件监听器到新添加的回复more按钮
              listenLodeMore()
        }


    //评论时间格式化
    function formatDate(dateString) {
    var date = new Date(dateString + ' UTC');
    var year = date.getUTCFullYear();
    var month = String(date.getUTCMonth() + 1).padStart(2, '0');
    var day = String(date.getUTCDate()).padStart(2, '0');
    var hours = String(date.getUTCHours()).padStart(2, '0');
    var minutes = String(date.getUTCMinutes()).padStart(2, '0');
    var seconds = String(date.getUTCSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }



    //评论内容显示数字
    function updateCharacterCount() {
    var comment = document.getElementById("comment").value;
    var count = comment.length;
    var characterCount = document.getElementById("characterCount");
    characterCount.innerText = "Characters: " + count + "/100";
    }
    // 验证评论输入框是否为空
    function validateComment() {
    var comment = document.getElementById("comment").value.trim();
    if (comment === "") {
      alert("评论内容不能为空");
      return false; // 阻止表单提交
    }
    return true; // 允许表单提交
    }

    // 创建一个函数，用于为回复按钮添加点击事件监听器
    function addReplyButtonClickListener() {
    var replyBtns = document.querySelectorAll('.reply-btn'); // 获取所有回复按钮
    replyBtns.forEach(function(replyBtn) {
    replyBtn.addEventListener('click', function() {
         // 获取 <span> 元素，用于关闭弹出框
        const span = document.getElementsByClassName("close")[0];
        var user_comment_id = this.getAttribute('user_comment_id');
        var user = this.getAttribute('data-user');

      document.getElementById('replyContent').value = '@' + user + ' '; // 在输入框中设置回复对象
         // 将评论的ID存储在提交按钮中
      document.getElementById('submitReplyBtn').setAttribute('user_comment_id', user_comment_id);
      document.getElementById('commentModal').style.display = 'block'; // 显示评论输入框模态框

         // 当点击 <span> (x), 关闭弹出框
    span.onclick = function () {
        document.getElementById("commentModal").style.display = "none";
    }

    // 当用户点击模态框之外的任何地方，关闭弹出框
    window.onclick = function (event) {
        if (event.target == document.getElementById("commentModal")) {
            document.getElementById("commentModal").style.display = "none";
        }
    }
    });
    });
    }



    // 获取提交回复按钮元素
    var submitBtn = document.getElementById("submitReplyBtn");
    // 绑定点击事件监听器
    submitBtn.addEventListener("click", function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    // 获取回复内容
    var replyContent = document.getElementById("replyContent").value.trim();
    var user_comment_id = this.getAttribute('user_comment_id');
    // 检查回复内容是否为空
    if (replyContent === "") {
        alert("回复内容不能为空");
        return;
    }
    // 准备要发送的数据，以对象形式表示
    var data = {
        user_comment_id: user_comment_id,
        content: replyContent
    };

    // 将数据转换为 JSON 格式
    var jsonData = JSON.stringify(data);

    // 创建一个新的 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();

    // 设置请求的类型、URL 以及是否异步
    xhr.open("POST", "/submit_reply/{{ currentUser }}", true);

    // 设置请求头，声明数据为 JSON 格式
    xhr.setRequestHeader("Content-Type", "application/json");

    // 当请求完成时执行的函数
    xhr.onload = function () {
        if (xhr.status === 200) {
            // 请求成功，处理返回的数据
            alert('回复成功！');
            window.location.reload();;
            // 可以在这里执行一些成功提交后的操作，比如刷新评论区等
        } else {
            alert('回复失败！');
            window.location.reload();
            // 请求失败，输出错误信息
            console.error('请求失败: ' + xhr.statusText);
        }
    };

    // 当请求发生错误时执行的函数
    xhr.onerror = function () {
        console.error('请求错误');
    };

    // 发送请求并将 JSON 数据作为请求体发送给后端
    xhr.send(jsonData);
    });


    //初始调用绑定监听
    addReplyButtonClickListener();




    function listenLodeMore() {
        // 创建一个识别是否显示有更多按钮的函数
        fetch(`/get_is_second_comments`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                for (var i = 0; i < data.length; i++) {
                    var comment = data[i];
                    var commentId = comment[0];

                    var commentElement = document.getElementById(commentId);
                    // 获取评论元素下的 expand-btn 按钮
                    var expandButton = commentElement.querySelector('.expand-btn');
                    //console.error('元素', commen    tElement);
                    //console.error('按钮', expandButton);
                    // 将按钮显示出来
                    expandButton.style.display = "block";
                }
            })
            .catch(error => {
            });


        if (!commentsDiv.hasAttribute('data-listener')) { // 检查按钮是否已经有了点击事件监听器
            commentsDiv.setAttribute('data-listener', true); // 添加自定义属性标记按钮已经监听
            commentsDiv.addEventListener('click', function () {
                if (event.target.classList.contains('expand-btn')) {
                    var commentElementId = event.target.closest('.comment').id; // 获取评论元素的id
                    var expandButton = event.target.closest('.expand-btn'); // 获取展开按钮元素
                    //console.error("commentId：", commentElementId);
                    //console.error("expandButton：", expandButton);

                    loadSecondComments(commentElementId, expandButton); // 调用加载二次评论的函数，并传递 commentId 参数
                }
            });
        }
    }

    // 创建一个函数，用于加载指定评论下的二次评论
    function loadSecondComments(commentId,expandButton) {
        // 发送请求获取指定评论下的二次评论数据，并将数据展示在页面上
        // 使用Fetch API发送GET请求
        fetch(`/get_second_comments?commentId=${commentId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                // 处理返回的数据，将二次评论显示在页面上
                var secondCommentsContainer = document.createElement('div');// 创建一个新的 <div> 元素作为二次评论的容器
                secondCommentsContainer.classList.add('second-comments');// 添加 CSS 类名 'second-comments' 到容器元素

                data.forEach(comment => {
                    var secondCommentElement = document.createElement('div');// 创建一个新的 <div> 元素作为单个二次评论的容器
                    secondCommentElement.classList.add('comment');// 添加 CSS 类名 'comment' 到二次评论容器

                    // 使用评论数据创建二次评论的 HTML 结构
                    secondCommentElement.innerHTML = `
                  <div class="user-info">
                            <img src="../${comment.avatar}" style="width: 50px; height: 50px; border-radius: 50%;">
                            <p class="username">${comment.username}</p>
                  </div>
                  <p class="content">${comment.content}</p>
                  <p class="time">时间: ${formatDate(comment.time)}</p>
                `;

                    secondCommentsContainer.appendChild(secondCommentElement); // 将单个二次评论添加到二次评论容器中
                });

                // 将二次评论容器插入到指定评论下方
                var commentElement = document.getElementById(commentId); // 获取指定评论的元素
                commentElement.appendChild(secondCommentsContainer);// 将二次评论容器插入到指定评论的元素中

                // 隐藏展开按钮
                expandButton.style.display = "none";
            })
            .catch(error => {
                // console.error('There was a problem with the fetch operation:', error);
            });
    }
    </script>
</body>
</html>